--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Commit 58829f9b329c2d12be2836b3c4fc8ff7d10ebf41
Parents : b036448
Author : Ivan <ivan@quad4.io>
Signature : Signature validation error
Date : 2026-04-29T19:35:22-05:00
feat(about): update AboutPage with support contact section and update localization for multiple languages
Changes
9 files changed, 139 insertions(+), 125 deletions(-)
Diff
diff --git a/meshchatx/src/frontend/components/about/AboutPage.vue b/meshchatx/src/frontend/components/about/AboutPage.vue
index 7dbf123a..a4ebbb1d 100644
--- a/meshchatx/src/frontend/components/about/AboutPage.vue
+++ b/meshchatx/src/frontend/components/about/AboutPage.vue
@@ -93,149 +93,156 @@
>{{ $t("about.tagline_after") }}
</div>
- <div class="mt-6 pt-6 border-t border-gray-200/70 dark:border-zinc-800/80 space-y-3">
- <div class="flex items-center justify-between">
- <div
- class="text-xs font-black uppercase tracking-widest text-gray-500 dark:text-zinc-500"
- >
- {{ $t("about.contact_developer") }}
- </div>
- <v-icon
- :icon="showContactDev ? 'mdi-chevron-up' : 'mdi-chevron-down'"
- size="18"
- ></v-icon>
- </div>
+ <div class="mt-6 pt-6 border-t border-gray-200/70 dark:border-zinc-800/80">
<button
- class="w-full text-left flex items-center justify-between px-4 py-2 rounded-xl bg-blue-500/10 hover:bg-blue-500/20 text-blue-600 dark:text-blue-400 border border-blue-500/20 transition-all"
- @click="showContactDev = !showContactDev"
+ type="button"
+ class="group w-full flex items-center justify-between gap-3 px-4 py-3 rounded-2xl bg-gradient-to-br from-blue-500/[0.08] via-slate-500/[0.06] to-violet-500/[0.08] dark:from-blue-500/15 dark:via-zinc-800/40 dark:to-violet-500/15 hover:from-blue-500/15 hover:to-violet-500/15 dark:hover:from-blue-500/25 dark:hover:to-violet-500/25 border border-gray-200/80 dark:border-zinc-700/80 transition-all text-left min-h-[52px]"
+ :aria-expanded="showContactSupport"
+ @click="showContactSupport = !showContactSupport"
>
- <div class="flex items-center gap-2">
- <v-icon icon="mdi-account-card-details" size="18"></v-icon>
- <span class="text-xs font-black uppercase tracking-widest">{{
- $t("about.contact_details")
- }}</span>
+ <div class="flex items-center gap-3 min-w-0">
+ <span
+ class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-blue-500/15 dark:bg-blue-500/25 text-blue-600 dark:text-blue-300 ring-1 ring-blue-500/20"
+ >
+ <v-icon icon="mdi-card-account-details-outline" size="22"></v-icon>
+ </span>
+ <span
+ class="text-xs font-black uppercase tracking-widest text-gray-800 dark:text-zinc-100 truncate"
+ >
+ {{ $t("about.contact_support_title") }}
+ </span>
</div>
+ <v-icon
+ :icon="showContactSupport ? 'mdi-chevron-up' : 'mdi-chevron-down'"
+ size="22"
+ class="shrink-0 text-gray-500 dark:text-zinc-400 group-hover:text-gray-700 dark:group-hover:text-zinc-200 transition-colors"
+ ></v-icon>
</button>
<transition name="fade">
<div
- v-if="showContactDev"
- class="mt-4 p-5 rounded-2xl bg-white/50 dark:bg-zinc-950/50 border border-gray-100 dark:border-zinc-800 space-y-4"
+ v-if="showContactSupport"
+ class="mt-4 p-5 sm:p-6 rounded-2xl bg-white/60 dark:bg-zinc-950/60 border border-gray-100 dark:border-zinc-800 space-y-8 shadow-sm"
>
- <div class="space-y-1">
- <div class="text-[9px] font-black text-gray-400 uppercase tracking-widest">
- {{ $t("about.contact_lxmf_address") }}
+ <div class="space-y-4">
+ <div
+ class="flex items-center gap-2 text-[10px] font-black uppercase tracking-widest text-gray-500 dark:text-zinc-400"
+ >
+ <v-icon
+ icon="mdi-account-circle-outline"
+ size="18"
+ class="text-blue-500"
+ ></v-icon>
+ {{ $t("about.contact_developer") }}
</div>
- <div class="flex items-center gap-2">
- <code
- class="text-[11px] font-mono bg-zinc-100 dark:bg-zinc-900 px-2 py-1 rounded-lg break-all"
- >7cc8d66b4f6a0e0e49d34af7f6077b5a</code
- >
- <button
- class="p-1 hover:text-blue-500 transition"
- @click="
- copyValue(
- '7cc8d66b4f6a0e0e49d34af7f6077b5a',
- 'about.contact_lxmf_address'
- )
- "
- >
- <v-icon icon="mdi-content-copy" size="14"></v-icon>
- </button>
+ <div class="space-y-1">
+ <div class="text-[9px] font-black text-gray-400 uppercase tracking-widest">
+ {{ $t("about.contact_lxmf_address") }}
+ </div>
+ <div class="flex items-center gap-2">
+ <code
+ class="text-[11px] font-mono bg-zinc-100 dark:bg-zinc-900 px-2 py-1 rounded-lg break-all"
+ >7cc8d66b4f6a0e0e49d34af7f6077b5a</code
+ >
+ <button
+ type="button"
+ class="p-1 hover:text-blue-500 transition"
+ @click="
+ copyValue(
+ '7cc8d66b4f6a0e0e49d34af7f6077b5a',
+ 'about.contact_lxmf_address'
+ )
+ "
+ >
+ <v-icon icon="mdi-content-copy" size="14"></v-icon>
+ </button>
+ </div>
</div>
- </div>
- <div class="space-y-1">
- <div class="text-[9px] font-black text-gray-400 uppercase tracking-widest">
- {{ $t("about.contact_alternate") }}
+ <div class="space-y-1">
+ <div class="text-[9px] font-black text-gray-400 uppercase tracking-widest">
+ {{ $t("about.contact_alternate") }}
+ </div>
+ <div class="flex items-center gap-2">
+ <code
+ class="text-[11px] font-mono bg-zinc-100 dark:bg-zinc-900 px-2 py-1 rounded-lg break-all"
+ >43d3309adf27fc446556121b553b56a6</code
+ >
+ <button
+ type="button"
+ class="p-1 hover:text-blue-500 transition"
+ @click="
+ copyValue(
+ '43d3309adf27fc446556121b553b56a6',
+ 'about.contact_alternate'
+ )
+ "
+ >
+ <v-icon icon="mdi-content-copy" size="14"></v-icon>
+ </button>
+ </div>
</div>
- <div class="flex items-center gap-2">
- <code
- class="text-[11px] font-mono bg-zinc-100 dark:bg-zinc-900 px-2 py-1 rounded-lg break-all"
- >43d3309adf27fc446556121b553b56a6</code
- >
- <button
- class="p-1 hover:text-blue-500 transition"
- @click="
- copyValue(
- '43d3309adf27fc446556121b553b56a6',
- 'about.contact_alternate'
- )
- "
- >
- <v-icon icon="mdi-content-copy" size="14"></v-icon>
- </button>
+ <div
+ class="text-xs font-bold text-gray-600 dark:text-zinc-300 bg-blue-500/[0.06] dark:bg-blue-500/10 p-3 rounded-xl border border-blue-500/15 flex items-start gap-2"
+ >
+ <v-icon
+ icon="mdi-information-outline"
+ size="18"
+ class="text-blue-500 shrink-0 mt-0.5"
+ ></v-icon>
+ <span>{{ $t("about.contact_propagation_hint") }}</span>
</div>
</div>
+
<div
- class="text-xs font-bold text-gray-500 dark:text-white italic bg-blue-500/5 p-3 rounded-xl border border-blue-500/10 flex items-center gap-2"
+ class="border-t border-gray-200/90 dark:border-zinc-800 pt-8 space-y-4 -mx-1 px-1"
>
- <v-icon icon="mdi-information-outline" size="14" class="text-blue-500"></v-icon>
- {{ $t("about.contact_propagation_hint") }}
- </div>
- </div>
- </transition>
- </div>
-
- <div class="mt-6 pt-6 border-t border-gray-200/70 dark:border-zinc-800/80 space-y-3">
- <button
- type="button"
- class="w-full text-left flex items-center justify-between px-4 py-2 rounded-xl bg-violet-500/10 hover:bg-violet-500/20 text-violet-800 dark:text-violet-200 border border-violet-500/20 transition-all"
- @click="showDonate = !showDonate"
- >
- <div class="flex items-center gap-2">
- <v-icon icon="mdi-hand-heart" size="18"></v-icon>
- <span class="text-xs font-black uppercase tracking-widest">{{
- $t("about.donate_label")
- }}</span>
- </div>
- <v-icon :icon="showDonate ? 'mdi-chevron-up' : 'mdi-chevron-down'" size="18"></v-icon>
- </button>
-
- <transition name="fade">
- <div
- v-if="showDonate"
- class="mt-4 p-5 rounded-2xl bg-white/50 dark:bg-zinc-950/50 border border-gray-100 dark:border-zinc-800 space-y-4"
- >
- <div class="space-y-1">
- <div class="text-[9px] font-black text-gray-400 uppercase tracking-widest">
- {{ $t("about.donate_monero_label") }}
+ <div
+ class="flex items-center gap-2 text-[10px] font-black uppercase tracking-widest text-violet-700 dark:text-violet-300"
+ >
+ <v-icon icon="mdi-hand-heart" size="18"></v-icon>
+ {{ $t("about.donate_label") }}
+ </div>
+ <div class="space-y-1">
+ <div class="text-[9px] font-black text-gray-400 uppercase tracking-widest">
+ {{ $t("about.donate_monero_label") }}
+ </div>
+ <div class="flex items-center gap-2">
+ <code
+ class="text-[11px] font-mono bg-zinc-100 dark:bg-zinc-900 px-2 py-1 rounded-lg break-all select-all"
+ >{{ moneroDonateAddress }}</code
+ >
+ <button
+ type="button"
+ class="p-1 hover:text-violet-600 dark:hover:text-violet-300 transition shrink-0"
+ :aria-label="$t('about.donate_copy_monero')"
+ @click="copyValue(moneroDonateAddress, 'about.donate_monero_label')"
+ >
+ <v-icon icon="mdi-content-copy" size="14"></v-icon>
+ </button>
+ </div>
</div>
- <div class="flex items-center gap-2">
- <code
- class="text-[11px] font-mono bg-zinc-100 dark:bg-zinc-900 px-2 py-1 rounded-lg break-all select-all"
- >{{ moneroDonateAddress }}</code
+
+ <div class="flex flex-col gap-2 sm:flex-row sm:flex-wrap pt-1">
+ <a
+ href="https://ko-fi.com/quad4"
+ target="_blank"
+ rel="noopener noreferrer"
+ class="inline-flex flex-1 items-center justify-center gap-2 px-4 py-2.5 rounded-xl bg-orange-500/15 hover:bg-orange-500/25 text-orange-900 dark:text-orange-100 border border-orange-500/25 text-xs font-bold uppercase tracking-wide min-h-[44px]"
>
- <button
- type="button"
- class="p-1 hover:text-violet-600 dark:hover:text-violet-300 transition shrink-0"
- :aria-label="$t('about.donate_copy_monero')"
- @click="copyValue(moneroDonateAddress, 'about.donate_monero_label')"
+ <v-icon icon="mdi-coffee" size="18"></v-icon>
+ {{ $t("about.donate_kofi") }}
+ </a>
+ <a
+ href="https://buymeacoffee.com/quad4"
+ target="_blank"
+ rel="noopener noreferrer"
+ class="inline-flex flex-1 items-center justify-center gap-2 px-4 py-2.5 rounded-xl bg-amber-500/15 hover:bg-amber-500/25 text-amber-950 dark:text-amber-50 border border-amber-500/25 text-xs font-bold uppercase tracking-wide min-h-[44px]"
>
- <v-icon icon="mdi-content-copy" size="14"></v-icon>
- </button>
+ <v-icon icon="mdi-cup" size="18"></v-icon>
+ {{ $t("about.donate_buymeacoffee") }}
+ </a>
</div>
</div>
-
- <div class="flex flex-col gap-2 sm:flex-row sm:flex-wrap pt-1">
- <a
- href="https://ko-fi.com/quad4"
- target="_blank"
- rel="noopener noreferrer"
- class="inline-flex flex-1 items-center justify-center gap-2 px-4 py-2.5 rounded-xl bg-orange-500/15 hover:bg-orange-500/25 text-orange-900 dark:text-orange-100 border border-orange-500/25 text-xs font-bold uppercase tracking-wide min-h-[44px]"
- >
- <v-icon icon="mdi-coffee" size="18"></v-icon>
- {{ $t("about.donate_kofi") }}
- </a>
- <a
- href="https://buymeacoffee.com/quad4"
- target="_blank"
- rel="noopener noreferrer"
- class="inline-flex flex-1 items-center justify-center gap-2 px-4 py-2.5 rounded-xl bg-amber-500/15 hover:bg-amber-500/25 text-amber-950 dark:text-amber-50 border border-amber-500/25 text-xs font-bold uppercase tracking-wide min-h-[44px]"
- >
- <v-icon icon="mdi-cup" size="18"></v-icon>
- {{ $t("about.donate_buymeacoffee") }}
- </a>
- </div>
</div>
</transition>
</div>
@@ -1036,8 +1043,7 @@ export default {
electronVersion: null,
chromeVersion: null,
nodeVersion: null,
- showContactDev: false,
- showDonate: false,
+ showContactSupport: false,
moneroDonateAddress:
"83SUg6mmkkVGwCycckLEgRfdmXNm7H9XtVjbGXp5kko71N6pTefYURJeS7WdEGHrz2aagmt4nF3dWg6mHcYs6yu4EokwhTh",
};
diff --git a/meshchatx/src/frontend/locales/de.json b/meshchatx/src/frontend/locales/de.json
index 97665195..5d61fd34 100644
--- a/meshchatx/src/frontend/locales/de.json
+++ b/meshchatx/src/frontend/locales/de.json
@@ -807,6 +807,7 @@
"contact_alternate": "Alternativadresse",
"contact_details": "Details",
"contact_developer": "Entwickler kontaktieren",
+ "contact_support_title": "Kontakt & Unterstuetzung",
"contact_lxmf_address": "LXMF-Adresse",
"contact_propagation_hint": "An den Verbreitungsknoten senden, wenn Sie mich nicht direkt erreichen können.",
"donate_label": "Spenden",
diff --git a/meshchatx/src/frontend/locales/en.json b/meshchatx/src/frontend/locales/en.json
index e4765535..e774998b 100644
--- a/meshchatx/src/frontend/locales/en.json
+++ b/meshchatx/src/frontend/locales/en.json
@@ -737,6 +737,7 @@
"contact_alternate": "Alternate",
"contact_details": "Details",
"contact_developer": "Contact Developer",
+ "contact_support_title": "Contact & support",
"contact_lxmf_address": "LXMF Address",
"contact_propagation_hint": "Send to propagation node if you cant reach me!",
"donate_label": "Donate",
diff --git a/meshchatx/src/frontend/locales/es.json b/meshchatx/src/frontend/locales/es.json
index 0f1f0782..053806f6 100644
--- a/meshchatx/src/frontend/locales/es.json
+++ b/meshchatx/src/frontend/locales/es.json
@@ -755,6 +755,7 @@
"contact_alternate": "Dirección alternativa",
"contact_details": "Detalles",
"contact_developer": "Contactar con el desarrollador",
+ "contact_support_title": "Contacto y apoyo",
"contact_lxmf_address": "Dirección LXMF",
"contact_propagation_hint": "Enviar al nodo de propagación si no puedes alcanzarme directamente.",
"donate_label": "Donar",
diff --git a/meshchatx/src/frontend/locales/fr.json b/meshchatx/src/frontend/locales/fr.json
index 01c2ebcd..00ef3f33 100644
--- a/meshchatx/src/frontend/locales/fr.json
+++ b/meshchatx/src/frontend/locales/fr.json
@@ -755,6 +755,7 @@
"contact_alternate": "Adresse alternative",
"contact_details": "Détails",
"contact_developer": "Contacter le développeur",
+ "contact_support_title": "Contact et soutien",
"contact_lxmf_address": "Adresse LXMF",
"contact_propagation_hint": "Envoyez au nœud de propagation si vous ne pouvez pas me joindre directement.",
"donate_label": "Faire un don",
diff --git a/meshchatx/src/frontend/locales/it.json b/meshchatx/src/frontend/locales/it.json
index d202c27f..e7d6ab03 100644
--- a/meshchatx/src/frontend/locales/it.json
+++ b/meshchatx/src/frontend/locales/it.json
@@ -807,6 +807,7 @@
"contact_alternate": "Indirizzo alternativo",
"contact_details": "Dettagli",
"contact_developer": "Contatta lo sviluppatore",
+ "contact_support_title": "Contatto e supporto",
"contact_lxmf_address": "Indirizzo LXMF",
"contact_propagation_hint": "Invia al nodo di propagazione se non riesci a raggiungermi direttamente.",
"donate_label": "Dona",
diff --git a/meshchatx/src/frontend/locales/nl.json b/meshchatx/src/frontend/locales/nl.json
index 0675e94b..3e0545cb 100644
--- a/meshchatx/src/frontend/locales/nl.json
+++ b/meshchatx/src/frontend/locales/nl.json
@@ -755,6 +755,7 @@
"contact_alternate": "Alternatief adres",
"contact_details": "Details",
"contact_developer": "Ontwikkelaar contacteren",
+ "contact_support_title": "Contact & ondersteuning",
"contact_lxmf_address": "LXMF-adres",
"contact_propagation_hint": "Stuur naar het propagatieknooppunt als je me niet direct kunt bereiken.",
"donate_label": "Doneren",
diff --git a/meshchatx/src/frontend/locales/ru.json b/meshchatx/src/frontend/locales/ru.json
index dfa10c9c..e08f5f66 100644
--- a/meshchatx/src/frontend/locales/ru.json
+++ b/meshchatx/src/frontend/locales/ru.json
@@ -807,6 +807,7 @@
"contact_alternate": "Альтернативный адрес",
"contact_details": "Подробности",
"contact_developer": "Связаться с разработчиком",
+ "contact_support_title": "Контакты и поддержка",
"contact_lxmf_address": "Адрес LXMF",
"contact_propagation_hint": "Отправьте на узел распространения, если не удаётся связаться со мной напрямую.",
"donate_label": "Пожертвование",
diff --git a/meshchatx/src/frontend/locales/zh.json b/meshchatx/src/frontend/locales/zh.json
index e5b37eb0..647f2a40 100644
--- a/meshchatx/src/frontend/locales/zh.json
+++ b/meshchatx/src/frontend/locales/zh.json
@@ -755,6 +755,7 @@
"contact_alternate": "备用地址",
"contact_details": "详情",
"contact_developer": "联系开发者",
+ "contact_support_title": "联系与支持",
"contact_lxmf_address": "LXMF 地址",
"contact_propagation_hint": "若无法直接联系我，请发送至传播节点。",
"donate_label": "捐赠",
──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────